<!-- 随访用户 -->
<template>
  <globalModal :width="1000" :title="`${doctor.deptName}-${doctor.realName}的随访患者`" :visible="visible" :footer="null" @cancel="handleCancel">
    <!-- 查询区域 -->
    <a-form layout="inline">
      <!-- 固定条件 -->
      <a-form-item label="患者姓名">
        <a-input v-model="filter.realName" style="width: 200px" placeholder="请输入患者姓名" />
      </a-form-item>
      <a-form-item label="联系方式">
        <a-input v-model="filter.phone" style="width: 200px" placeholder="请输入联系方式" />
      </a-form-item>
      <!-- 按钮 -->
      <a-space class="table-page-search-submitButtons">
        <a-button type="primary" @click="searchQuery"> 搜索 </a-button>
        <a-button class="ant-btn-yellow" @click="searchReset">清除</a-button>
      </a-space>
    </a-form>
    <div style="margin: 10px 0">
      <a-space>
        <a-button type="primary" @click="add"> 新增患者 </a-button>
        <a-button type="primary" @click="handleExport"> 导入患者 </a-button></a-space
      >
    </div>
    <s-table
      style="width: 100%"
      bordered
      :columns="columns"
      :data="loadListData"
      rowKey="domesticAnimalsId"
      ref="table"
      :scroll="{ x: 942, y: 210 }"
      size="small"
      :isFirstLoad="false"
    >
      <span slot="age" slot-scope="text, record">{{ calcAge(record.birth) }}</span>
    </s-table>
    <import-account-modal ref="importAccountModal" @ok="searchQuery"></import-account-modal>
    <addOrEditAccountModal ref="addOrEditAccountModal" @ok="searchQuery"></addOrEditAccountModal>
  </globalModal>
</template>

<script>
import { patientManageapi } from "@/api/index.js";
import { ModalMixins } from "@/mixins";
import importAccountModal from "./importAccountModal.vue";
import addOrEditAccountModal from "../../accountManage/module/addOrEditAccountModal.vue";
import { calcAge } from "@/utils/base";
const columns = [
  {
    title: "患者姓名",
    dataIndex: "realName",
    key: "realName",
    with: 160
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
    ellipsis: true,
    with: 160,
    scopedSlots: {
      customRender: "age"
    }
  },
  {
    title: "性别",
    dataIndex: "gender",
    key: "gender",
    ellipsis: true,
    with: 160
  },
  {
    title: "联系方式",
    dataIndex: "phone",
    key: "phone",
    ellipsis: true,
    with: 160
  }
];
export default {
  name: "AccountModal",
  mixins: [ModalMixins],
  components: {
    importAccountModal,
    addOrEditAccountModal
  },
  data () {
    return {
      columns,
      visible: false,
      doctorId: "",
      filter: {},
      doctor: {}
    };
  },
  created () {},
  methods: {
    calcAge (birth) {
      if (birth) {
        return calcAge(birth);
      }
      return "";
    },
    show (doctor) {
      this.visible = true;
      this.doctorId = doctor.doctorId;
      this.doctor = doctor;
      this.$nextTick(() => {
        this.$refs.table.refresh();
      });
    },
    searchQuery () {
      this.$refs.table.refresh();
    },
    searchReset () {
      this.filter = {};
      this.$refs.table.refresh();
    },
    handleCancel () {
      this.$emit("close");
      this.visible = false;
    },
    loadListData (parameter) {
      const params = Object.assign({}, { doctorId: this.doctorId }, this.filter, parameter);
      return this.$postAction(patientManageapi.patientUrl.getList, params).then((res) => {
        this.list = res.data;
        return res.data;
      });
    },
    add () {
      this.$refs.addOrEditAccountModal.add(this.doctor);
    },
    handleExport () {
      this.$refs.importAccountModal.show(this.doctor);
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.table-page-search-submitButtons {
  margin-top: 4px;

  .ant-btn-blue {
    color: #fff;
    background-color: #3b74f8;
    border-color: #3b74f8;
  }

  .ant-btn-yellow {
    color: #fff;
    background-color: rgb(248, 191, 59);
    border-color: rgb(248, 191, 59);
  }
}
/deep/ .table-wrapper .operation {
  line-height: 1;

  a {
    &.del {
      color: #d43030;
    }
    &.edit {
      color: #0a8783;
    }
  }
  a + a {
    margin-left: 12px;
  }
}
/deep/.ant-form {
  .ant-form-item {
    margin-bottom: 0;
  }
}
</style>
